Zenn
👍

神威/KAMUIとRoo-clineとSourceSageMCPでRustバックエンドのシンプルダッシュボードを作ってみた！

2024/12/22に公開
自動化
roocline
神威kamui
sourcesagemcp
tech

はじめに 🎯

神威/KAMUIとRoo-clineの最新機能を使って、Rustをバックエンドにしたシンプルなダッシュボードアプリケーションを作成してみました。今回はSourceSage MCPを活用して、プロジェクト構造の分析から実装まで自動化しています。

神威/KAMUIによる設計 🎯

まず、神威/KAMUIを使用してプロジェクトの構造を定義しました。KAMUIはstructure.yamlを生成し、これをもとにRoo-clineが実装を進めていきます。

src:
  structure.yaml:
    content: |-
      Nekoneko Technology Management Dashboard
      - バックエンド: Rust (Axum)
      - フロントエンド: Next.js (TypeScript)
      - データベース: PostgreSQL
      - 状態管理: Zustand
      - UI: Shadcn/ui, Tailwind CSS
      
      主要機能:
      - ダッシュボード
      - プロジェクト管理
      - リソース追跡
      - ユーザー認証
      
      agent選定理由: claude-3-5-sonnetは複雑なアーキテクチャの設計と実装に最適
      api選定理由: OpenAI APIを使用し、AIによる高度な分析機能を提供

    dependency: []
    agent: "claude-3-5-sonnet-20241022"
    api: "openai-gpt-4o"

この構造定義により、Roo-clineは必要な依存関係やファイル構造を理解し、効率的に実装を進めることができました。

プロジェクト概要 📋

  • プロジェクト名: nekoneko-technology-management-dashboard
  • フロントエンド: Next.js + TypeScript
  • バックエンド: Rust (Axum)
  • 状態管理: Zustand
  • UIライブラリ: shadcn/ui

実装プロセス 🔄

1. プロジェクト作成とデプロイ

実行されたプロセス:

  1. GitHubリポジトリの作成:
gh repo create nekoneko-technology-management-dashboard --public --description "ねこねこテクノロジー技術管理ダッシュボード" --confirm
  1. プロジェクト構造の分析（Source Sage MCP使用）:
generate_structure
Arguments:
{
  "path": "C:/Prj/nekoneko-technology-management-dashboard"
}
  1. アセットディレクトリの作成とSVGヘッダー生成
  2. プロジェクトのREADME.md作成
  3. Gitflowの初期化（aira-mcp-server使用）

最初のプロンプト:

nekoneko-technology-management-dashboard というGithubのリポジトリを作成して公開デプロイして

Roo-clineの自動処理:

  • GitHubリポジトリの作成
  • プロジェクトの初期構造の設定
  • README.mdとヘッダー画像の生成
  • Gitの初期化とプッシュ

2. フロントエンド実装

詳細な実行プロセス:

  1. 依存関係のインストール:
cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer
  1. shadcn/uiの設定:
npx shadcn-ui@latest init
  1. 必要なコンポーネントの生成:
cd src/frontend && npm install clsx tailwind-merge tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-slot
  1. TypeScript設定:
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ... その他の設定
  }
}
  1. Zustandストアの実装:
import { create } from 'zustand';

interface Project {
  id: string;
  name: string;
  status: string;
  progress: number;
}

interface ProjectStore {
  projects: Project[];
  fetchProjects: () => Promise<void>;
}

export const useProjectStore = create<ProjectStore>((set) => ({
  projects: [],
  fetchProjects: async () => {
    const response = await fetch('http://localhost:3002/projects');
    const data = await response.json();
    set({ projects: data });
  }
}));

自動実行されたコマンド:

cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer

Roo-clineが自動生成したファイル:

  • components.json (shadcn/ui設定)
  • tailwind.config.js
  • プロジェクトストア (Zustand)
  • UIコンポーネント (Card, Button, Dialog)

3. バックエンド実装 (Rust)

詳細な実行プロセス:

  1. Rustプロジェクトの作成と依存関係の追加:
cd src && cargo new backend
cd backend && cargo add tokio --features full
cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber
cargo add tower-http --features cors
  1. メインサーバーコードの実装:
use axum::{
    routing::{get, post},
    Router,
    Json,
};
use serde::{Deserialize, Serialize};
use tower_http::cors::{CorsLayer, Any};

#[derive(Debug, Serialize, Deserialize)]
struct Project {
    id: String,
    name: String,
    status: String,
    progress: f32,
}

#[tokio::main]
async fn main() {
    let cors = CorsLayer::new()
        .allow_origin(Any)
        .allow_methods(Any)
        .allow_headers(Any);

    let app = Router::new()
        .route("/projects", get(get_projects))
        .layer(cors);

    let listener = tokio::net::TcpListener::bind("127.0.0.1:3002")
        .await
        .unwrap();
    println!("Server running on http://localhost:3002");
    
    axum::serve(listener, app).await.unwrap();
}
  1. CORSの設定とエラーハンドリングの実装
  2. エンドポイントの実装（GET /projects）

自動実行されたコマンド:

cd src && cargo new backend && cd backend && cargo add tokio --features full && cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber

4. エラー対応と解決

発生したエラーと解決プロセス:

  1. idnaクレートの互換性エラー:
error[E0658]: use of unstable library feature 'error_in_core'

解決手順:

  • Cargo.tomlの依存関係を調整
  • idnaクレートのバージョンを指定
  • 一時的にデータベース関連の依存関係を削除
  1. フロントエンドのポート競合:
# バックエンドポートを3002に変更
let listener = tokio::net::TcpListener::bind("127.0.0.1:3002").await.unwrap();
  1. CORSエラーの解決:
let cors = CorsLayer::new()
    .allow_origin(Any)
    .allow_methods(Any)
    .allow_headers(Any);
  1. TypeScript型エラーの解決:
  • 適切な型定義の追加
  • インターフェースの実装

遭遇したエラー:

error[E0658]: use of unstable library feature 'error_in_core'

Roo-clineによる自動解決:

  • Cargo.tomlの依存関係の調整
  • idnaクレートのバージョン指定
  • データベース関連の依存関係の一時的な削除

コスト分析 💰

フロントエンド実装

  • トークン使用量: 160 / 15.0k
  • キャッシュヒット: +314.8k / 1.5m
  • API費用: $1.8544

バックエンド実装

  • トークン使用量: 112 / 4.3k
  • キャッシュヒット: +71.4k / 992.9k
  • API費用: $0.6307

総費用: $2.4851

まとめ ✨

Roo-clineとSourceSage MCPを使用することで、以下の利点がありました：

  1. プロジェクト構造の自動分析と最適化
  2. フロントエンド・バックエンドの自動実装
  3. エラーの自動検知と解決
  4. GitHubへの自動デプロイ

特に、Rustバックエンドの実装では、依存関係の解決やエラー対応を自動的に行ってくれる点が非常に便利でした。

リポジトリ 🔗

完成したプロジェクトは以下で確認できます：
nekoneko-technology-management-dashboard

使用ツール

https://github.com/RooVetGit/Roo-Cline

https://www.kamui.ai/

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion